<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view
		class="pure-tabbar"
		:class="_classes"
		:style="_styles"
		id="PureTabBar"
	>
		<view class="pure-tabbar__container">
			<view class="pure-tabbar__list">
				<view
					class="pure-tabbar__item"
					v-for="(_item, _index) in _list"
					:key="_index"
					@tap="_handleItemClick(_item, _index)"
					:class="_calcTabClasses(_item, _index)"
					:hover-class="hoverClass"
				>
					<view class="pure-tabbar__item__icon">
						<view class="pure-tabbar__item__icon-wrap pure-tabbar__item__icon-wrap--unselect">
							<pure-icon
								:name="_item?.[iconKey]"
								:mode="iconMode"
								v-bind="iconOpts"
							></pure-icon>
						</view>
						<view class="pure-tabbar__item__icon-wrap pure-tabbar__item__icon-wrap--selected">
							<pure-icon
								:name="_item?.[selectedIconKey]"
								:mode="iconMode"
								v-bind="iconOpts"
							></pure-icon>
						</view>
					</view>
					<view class="pure-tabbar__item__text">{{ _item?.[textKey] }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonComponentOptions from "../../config/options";
	export default {
		options: commonComponentOptions
	};
</script>

<script setup>
	import { ref, computed, onMounted, nextTick, getCurrentInstance } from "vue";
	import props from "./props";
	import { delay, getRect, getTabBarList } from "@/uni_modules/pure-utils";

	// vue 实例
	const _instance = getCurrentInstance();
	// 渲染后的真实高度
	const _realHeight = ref(50);

	// 数据
	const _list = computed(() => {
		if (_props?.list === undefined || _props.list === null) {
			return getTabBarList();
		}
		return _props.list;
	});

	// -------------------------------------------------------------------------------- Props
	const _props = defineProps(props);

	// -------------------------------------------------------------------------------- Emits
	const _emits = defineEmits(["onClick"]);

	// -------------------------------------------------------------------------------- Classes
	const _classes = computed(() => {
		const array = [];

		// 开启安全底部
		if (_props.safeAreaBottom) array.push("pure-tabbar--safe-area-bottom");

		// 是否固定在底部
		if (_props.isFixed) array.push("pure-tabbar--is-fixed");

		return array;
	});

	// -------------------------------------------------------------------------------- Styles
	const _styles = computed(() => {
		const array = [];

		// 图标大小
		if (_props.iconSize) array.push(`--pure-tabbar-icon-font-size: ${_props.iconSize};`);

		// 图标宽度
		if (_props.iconWidth) array.push(`--pure-tabbar-icon-width: ${_props.iconWidth};`);

		// 图标高度
		if (_props.iconHeight) array.push(`--pure-tabbar-icon-height: ${_props.iconHeight};`);

		// 文本大小
		if (_props.fontSize) array.push(`--pure-tabbar-font-size: ${_props.fontSize};`);

		// 默认文本颜色
		if (_props.color) array.push(`--pure-tabbar-color: ${_props.color};`);

		// 激活时文本颜色
		if (_props.activeColor) array.push(`--pure-tabbar-active-color: ${_props.activeColor};`);

		// 高度
		if (_props.height) array.push(`--pure-tabbar-height: ${_props.height};`);

		// 图标和文字之间的间距
		if (_props.gap) array.push(`--pure-tabbar-item-gap: ${_props.gap};`);

		// 背景
		if (_props.background) array.push(`--pure-tabbar-background: ${_props.background};`);

		// 组件高度
		array.push(`--pure-tabbar-component-height: ${_realHeight.value}px;`);

		return array;
	});

	// Tab Classes
	function _calcTabClasses(item, index) {
		const array = [];

		// 是否禁用
		if (item?.disabled) array.push("pure-tabbar__item--disabled");

		// 是否选中
		if (_props?.valueKey) {
			if ((item?.[_props.valueKey] || index) === _props.value) array.push("pure-tabbar__item--selected");
		} else {
			if (item === _props.value) array.push("pure-tabbar__item--selected");
		}

		return array;
	}

	// 点击事件
	function _handleItemClick(item, index) {
		_emits("onClick", index, item);
	}

	// 组件渲染完成后获取真实高度
	onMounted(async () => {
		// 等待渲染完成
		await nextTick();
		await delay(50);

		// 获取真实高度
		_realHeight.value = (await getRect("#PureTabBar", _instance))?.height || 50;

		// 挂载到全局，方便使用
		uni.$pureTabBarHeight = _realHeight.value;
	});

	defineExpose({
		height: _realHeight
	});
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>
